<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Yeffect-test-case</title>
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
    </head>
    <link rel="stylesheet" type="text/css" href="../../css/reset.css">
    <script src="../../script/libs/jquery-1.9.1.min.js"></script>
    <script>
        var res = ['magnifier'];
        var html = [];
        var timestamp = Date.parse(new Date());
        for(s in res){
            html.push('<script type="text/javascript" src="../../script/componets/'+res[s]+'.js?v='+timestamp+'"><\/script>');
        }
        document.write(html.join(''));
    </script>
    <style>
        .fierbox {
            width: 150px;
            height: 120px;
            position: absolute;
            opacity: 0.5;
            background: #EC9D09;
            display: none;
            margin: 0px;
            padding: 0px;
            cursor: move;
        }

        .fierContent {
            width: 300px;
            height: 240px;
            position: relative;
            overflow: hidden;
        }

        .fierContent img {
            width: 100%;
            height: 100%;
        }

        .fierContentM {
            width: 300px;
            height: 240px;
            position: absolute;
            display: none;
            overflow: hidden;
            top: 0px;
            right: 0px;
        }

        .magnifier {
            width: 630px;
            height: 240px;
            position: relative;
        }
    </style>
    <body>
    <div class="magnifier">
    　　<div class="fierContent">
            <img src="http://placehold.it/300x240" />
            <p class="fierbox"></p>
        </div>
    　　<div class="fierContentM"></div>
    </div>
    <script type="text/javascript">
        $(function(){
            /**
             *  布局要求
            * 1. 半透明区域块元素（第1个参数所指）必须放在 响应鼠标容器（第2个参数所指）中 且宽度是（第2个参数所指元素）宽高的一半 且具备 高度、宽度、定位、透明度、隐藏、背景色等属性 例如：.fierbox { width:150px; height:120px; position:absolute; opacity:0.5; background:#EC9D09; }
            2. 响应鼠标划入图的容器（第2个参数所指） 必须具备 定位、宽度、高度、超出隐藏 例如：.fierContent { width:300px; height:240px; position:relative; overflow:hidden; }
            3. 响应鼠标划入图的容器（第2个参数所指）里面需要放入一张图片且宽度高度均为100% 例如：.fierContent img { width:100%; height:100%; }
            4. 大图容器（第3个参数所指） 必须具备 宽高为（第2个参数所指）相等 且要有 定位、隐藏、超出隐藏等属性 例如：.fierContentM { width:300px; height:240px; position:absolute; display:none; overflow:hidden; }
             */
            Yeffect.magnifier(".fierbox",".fierContent",".fierContentM");
        })
    </script>
    </body>
</html>
